'use client';

import { Inter } from 'next/font/google';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Suspense } from 'react';
import Loading from './loading';
import { useRouteLoading } from '@/hooks/useRouteLoading';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
    const pathname = usePathname();
    const isLoading = useRouteLoading();

    return (
        <html lang="zh-CN">
            <body className={inter.className}>
                {isLoading && <Loading />}
                <div className="min-h-screen bg-gray-900">
                    {/* 导航栏 */}
                    <nav className="bg-gray-800 border-b border-gray-700">
                        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                            <div className="flex items-center justify-between h-16">
                                <div className="flex items-center">
                                    <Link href="/" className="text-xl font-bold text-white">
                                        直播平台
                                    </Link>
                                    <div className="hidden md:block ml-10">
                                        <div className="flex items-center space-x-4">
                                            <Link
                                                href="/"
                                                className={`px-3 py-2 rounded-md text-sm font-medium ${
                                                    pathname === '/'
                                                        ? 'bg-gray-900 text-white'
                                                        : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                                                }`}
                                            >
                                                首页
                                            </Link>
                                            <Link
                                                href="/browse"
                                                className={`px-3 py-2 rounded-md text-sm font-medium ${
                                                    pathname === '/browse'
                                                        ? 'bg-gray-900 text-white'
                                                        : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                                                }`}
                                            >
                                                浏览
                                            </Link>
                                            <Link
                                                href="/following"
                                                className={`px-3 py-2 rounded-md text-sm font-medium ${
                                                    pathname === '/following'
                                                        ? 'bg-gray-900 text-white'
                                                        : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                                                }`}
                                            >
                                                关注
                                            </Link>
                                            <Link
                                                href="/categories"
                                                className={`px-3 py-2 rounded-md text-sm font-medium ${
                                                    pathname === '/categories'
                                                        ? 'bg-gray-900 text-white'
                                                        : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                                                }`}
                                            >
                                                分类
                                            </Link>
                                        </div>
                                    </div>
                                </div>
                                <div className="flex items-center space-x-4">
                                    <Link
                                        href="/login"
                                        className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                                    >
                                        登录
                                    </Link>
                                    <Link
                                        href="/register"
                                        className="bg-indigo-600 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700"
                                    >
                                        注册
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </nav>

                    {/* 主内容区域 */}
                    <Suspense fallback={<Loading />}>{children}</Suspense>
                </div>
            </body>
        </html>
    );
}
